.left-panel,
.right-panel {
    position: absolute;
    z-index: var(--side-panel-in-z-index);
    display: flex;
    flex-direction: column;
    height: calc(100% - 180px);
    pointer-events: all;
    /*background: rgba(0, 207, 158, 0.21);*/
}

.left-panel {
    left: 30px;
}

.right-panel {
    right: 30px;
}

.slide-in-from-left-enter-active,
.slide-in-from-left-leave-active,
.slide-in-from-right-enter-active,
.slide-in-from-right-leave-active {
    transition: transform 0.8s ease-in-out;
}

.slide-in-from-left-enter-from,
.slide-in-from-left-leave-to {
    transform: translate3d(calc(-10px - 100%), 0, 0);
    z-index: var(--side-panel-out-z-index);
}

.slide-in-from-right-enter-from,
.slide-in-from-right-leave-to {
    transform: translate3d(calc(10px + 100%), 0, 0);
    z-index: var(--side-panel-out-z-index);
}

.rotate-in-from-top-enter-active,
.rotate-in-from-top-leave-active,
.rotate-in-from-bottom-enter-active,
.rotate-in-from-bottom-leave-active {
    transform-style: preserve-3d;
    transition: 0.8s ease-in-out;
}

.rotate-in-from-top-enter-active,
.rotate-in-from-top-leave-active {
    transform-origin: center top;
}

.rotate-in-from-top-enter-from,
.rotate-in-from-top-leave-to {
    transform: translateX(-50%) rotateX(-90deg);
    opacity: 0;
    z-index: var(--side-panel-out-z-index);
}


.slide-in-from-scale-enter-active,
.slide-in-from-scale-leave-active {
    transition: transform 0.8s ease-in-out;
}

.slide-in-from-scale-enter-from,
.slide-in-from-scale-leave-to {
    transform: scale3d(0, 0, 0);
    z-index: var(--side-panel-out-z-index);
}


.spread-btn {
    position: absolute;
    right: 0;
    z-index: var(--side-panel-in-z-index);
    transition: right 0.6s ease-in-out;
    pointer-events: auto;
    cursor: pointer;
    background: url("@/assets/images/spread-btn.svg");
    background-size: 100% 100%;
    width: 74px;
    height: 30px;
    line-height: 25px;
    font-size: 12px;
    padding-left: 40px;
    &::before {
        content: "";
        position: absolute;
        left: 0;
        top:0;
        width: 30px;
        height: 30px;
        background: url("@/assets/images/spread-btn-icon.svg") no-repeat;
        background-position: center;
        transform:  rotateY(180deg);
        transform-origin: center center;
        background-size: 16px 9px;

    }
}

.spread-btn.spread {
    right: 450px;
    transition: right 0.7s ease-in-out;
    &::before {
        transform:  rotateY(0deg);
    }
}

.spread-btn:not(.spread) {
    right: 30px;
    transition: right 1s ease-in-out;
}


